<template>
  <div v-show="isShow" class="confirm">
    <div class="container">
      <div class="box">
        <p class="head">
          {{tit}}
          <img @click="close" class="close" src="@/assets/close.png">
        </p>

        <p class="tit">{{info}}</p>

        <div class="btnBox">
          <button @click="leftCb" class="leftBtn" :class="[isLeftSelect ? 'selectBtn' : 'defaultBtn']">{{leftBtn}}</button>
          <button @click="rightCb" :class="[isRightSelect ? 'selectBtn' : 'defaultBtn']">{{rightBtn}}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Confirm',
};
</script>

<style lang="postcss" scoped>
.confirm {
  position: fixed;
  width: 100%; height: 100%;
  padding-left: 12%;
  box-sizing: border-box;
  left: 0; top: 0;
  background-color: rgba(0, 0, 0, .3);
  z-index: 10;

  & .container {
    position: relative;
    width: 100%;
    height: 100%;

    & .box {
      position: absolute;
      width: 7.38rem;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      height: 4.6rem;
      background-color: #fff;
      border-radius: 3px;
      line-height: 1;

      & .head {
        position: relative;
        height: 1rem;
        line-height: 1rem;
        font-size: .44rem;
        text-align: center;

        & .close {
          position: absolute;
          top: 50%; right: .3rem;
          transform: translateY(-50%);
          width: 0.35rem;
          height: 0.35rem;
        }
      }

      & .tit {
        margin-top: .4rem;
        text-align: center;
        font-size: .44rem;
      }

      & .btnBox {
        margin-top: .8rem;
        text-align: center;

        & button {
          line-height: 1;
          padding: .1rem 0;
          width: 1.5rem;
          font-size: .36rem;
          color: #fff;
          border-radius: 3rem;
        }

        & .leftBtn {
          margin-right: 1.2rem;
        }

        & .defaultBtn {
          background-color: #7F7F7F;
          background-image: linear-gradient(#A29D9D, #7F7F7F);
        }

        & .selectBtn {
          background-color: #9C60D9;
          background-image: linear-gradient(#9C60D9, #7B33C4);
        }
      }
    }
  }
}
</style>
